<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>销售统计表</title>
    <%@include file="/comm/head.jsp"%>
    <script src="/js/echarts.js"></script>
    <script src="/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="查询日期:">
                        <row>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsReportVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px"  ></date-picker></col>
                            <col span="12"> <date-picker  type="datetime" format="yyyy-MM-dd HH:mm" @on-change="xsReportVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" ></date-picker></col>
                        </row>
                    </form-item>

                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="searchXSreportList();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>

    <i-table :columns="myColumns" :data="myData" :height="400":width="500" border stripe style="float: left" >

    </i-table>
    <div id="main" style="width: 50%;height:400px;border:0.5px solid gray;float: right"></div>
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                {title:"商品类型",key: "goodsTpname"},
                {title:"销售额",key: "money"},
            ],
            myData:[],
            myData1:[],
            xsReportVo:{},

    // 指定图表的配置项和数据
           names:[],
           values:[],
        },
        mounted(){
            this.searchXSreportList();
            this.searchXSreport();
        },
        methods:{

            searchXSreportList(){//,this.xsReportVo
                axios.get(`${ctx}/cus/xstjb/list?`,{params:this.xsReportVo})
                    .then(({data})=>{
                        this.myData=data.result;
                        this.drawLine(this.xsReportVo)
                    });
            },
            drawLine(xsReportVo) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var names=[];
                var values=[];
                //数据加载完之前先显示一段简单的loading动画
                myChart.showLoading();
                var xsReportVo1={};
                xsReportVo1=xsReportVo
                $.ajax({
                    type : "get",
                    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                    url : "cus/xstjb/EcharsShow",    //请求发送到dataActiont处
                    data:xsReportVo1,
                    dataType : "json",        //返回数据形式为json
                    success : function(result) {
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        if (result) {
                            for(var i=0;i<result.length;i++){
                                names.push(result[i].name);
                                values.push(result[i].num);
                            }
                            myChart.hideLoading();    //隐藏加载动画
                            myChart.setOption(
                                {
                                    title: {
                                        text: '销售额统计表',
                                        x: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left',
                                        data: names
                                    },
                                    series: [
                                        {
                                            name: '销售统计表',
                                            type: 'pie',
                                            radius: '55%',
                                            center: ['50%', '60%'],
                                            data: result,
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                }
                            );
                        }
                    },
                    error : function(errorMsg) {
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                });//end ajax
    },}});
</script>
</body>
</html>
